<!--
 * @Author: 凌宇king
 * @Date: 2022-09-24 14:26:26
 * @LastEditTime: 2022-09-25 13:18:55
-->
<template>
    <div>
        <div ref="echart" style="width:50%;height:400px;"></div>
    </div>
</template>  

<script>export default {
    mounted() {
        this.createEcharts()
    },
    methods: {
        async createEcharts() {
            const res = await this.$http.get('/orderTotal')
            // console.log(res.data)
            if (res.data.status != 'success') {
                this.$message.error('服务器错误')
                return
            }
            else {
                //将返回的数据转为echars需要的数组数据[{ value: 1048, name: 'Search Engine' }]
                let echartData = res.data.result.map((item) => {
                    return { value: item.orderCounts, name: item._id }
                })
                //获取DOM容器
                const echartDom = this.$refs.echart;
                if (echartDom) {
                    //实例化echarts 
                    const myChart = this.$echarts.init(echartDom)
                    //饼图配置信息option 
                    const option = {
                        title: {
                            text: '订单统计', subtext: '9个订单模块', left: 'center'
                        }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [{ name: '用户发单数量', type: 'pie', radius: '50%', data: echartData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }]
                    };
                    //应用option配置
                    myChart.setOption(option)
                }
            }
        }
    }
}
</script>